<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <title>竞猜</title>
</head>

<body class="body">
    <div class="head">
        <div class="center">
            <a href="#" class="log-tit">LOL电竞</a>
            <a href="#">首页</a>
            <a href="#">赛事</a>
            <a href="#">战队</a>
            <a href="#">资讯</a>
            <a href="#">视频</a>
            <a href="#">兑换</a>
            <a href="#">预测</a>
            <span>
                <a href="login.html">登录</a>
                <a href="register.html">注册</a>
            </span>
        </div>
    </div>
    <div class="center">
        <div class="lbt">
            <div class="sliderNews">
                <ul class="lbt_ul">
                    <li>
                        <a href="#">
                            <img src="image/lbt1.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="image/lbt2.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="image/rmfz1.jpg">
                        </a>
                    </li>
                </ul>
                <div class="round">
                    <ul>
                        <li class="roundLiHover"></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="center">
        <div class="wrap">
            <ul class="jincai-game" id="J-hero-titles">
                <li class="curr"><img src="image/quanbu.png"><b>全部预测</b></li>
                <li class=""><img src="image/yxlm.png"><b>英雄联盟</b></li>
                <li class=""><img src="image/wzry.jpg"><b>王者荣耀</b></li>
                <li class=""><img src="image/daota.jpg"><b>刀塔</b></li>
            </ul>
            <div class="loljc J-hero-cont" style="display: block;">
                <div class="loljc-list">
                    <a href="#">
                        <img src="image/dsm.jpeg" alt="">
                        <h2>冯提莫</h2>
                        <a href="https://www.douyu.com/71017">www.douyu.com/71017</a>
                    </a>
                </div>
                <div class="loljc-list">
                    <a href="#">
                        <img src="image/dsm.jpeg" alt="">
                        <h2>冯提莫</h2>
                        <a href="https://www.douyu.com/71017">www.douyu.com/71017</a>
                    </a>
                </div>
                <div class="loljc-list">
                    <a href="#">
                        <img src="image/dsm.jpeg" alt="">
                        <h2>冯提莫</h2>
                        <a href="https://www.douyu.com/71017">www.douyu.com/71017</a>
                    </a>
                </div>
                <div class="loljc-list">
                    <a href="#">
                        <img src="image/dsm.jpeg" alt="">
                        <h2>冯提莫</h2>
                        <a href="https://www.douyu.com/71017">www.douyu.com/71017</a>
                    </a>
                </div>
                <div class="loljc-list">
                    <a href="#">
                        <img src="image/dsm.jpeg" alt="">
                        <h2>冯提莫</h2>
                        <a href="https://www.douyu.com/71017">www.douyu.com/71017</a>
                    </a>
                </div>


                <div class="loljc-list">
                        <a href="#">
                            <img src="image/dsm.jpeg" alt="">
                            <h2>冯提莫</h2>
                            <a href="https://www.douyu.com/71017">www.douyu.com/71017</a>
                        </a>
                    </div>
                    <div class="loljc-list">
                        <a href="#">
                            <img src="image/dsm.jpeg" alt="">
                            <h2>冯提莫</h2>
                            <a href="https://www.douyu.com/71017">www.douyu.com/71017</a>
                        </a>
                    </div>
                    <div class="loljc-list">
                        <a href="#">
                            <img src="image/dsm.jpeg" alt="">
                            <h2>冯提莫</h2>
                            <a href="https://www.douyu.com/71017">www.douyu.com/71017</a>
                        </a>
                    </div>
                    <div class="loljc-list">
                        <a href="#">
                            <img src="image/dsm.jpeg" alt="">
                            <h2>冯提莫</h2>
                            <a href="https://www.douyu.com/71017">www.douyu.com/71017</a>
                        </a>
                    </div>
                    <div class="loljc-list">
                        <a href="#">
                            <img src="image/dsm.jpeg" alt="">
                            <h2>冯提莫</h2>
                            <a href="https://www.douyu.com/71017">www.douyu.com/71017</a>
                        </a>
                    </div>
            </div>
            <div class="loljc J-hero-cont" style="display: none;">
                2
            </div>
            <div class="loljc J-hero-cont" style="display: none;">
                3
            </div>
            <div class="loljc J-hero-cont" style="display: none;">
                4
            </div>
        </div>
    </div>
    <div class="bottom_foot">
        <div class="wrapper">
            <p class="bottom_nav">
                <a href="/index/lan/id/1.html" target="_blank" title="">关于我们</a> <span>|</span>
                <a href="/index/lan/id/5.html" target="_blank" title="">联系我们</a><span>|</span>
                <a href="/index/register.html" target="_blank" title="">用户注册</a> <span>|</span>
                <a href="/index/findpass.html" target="_blank" title="">忘记密码</a>
                <span>|</span>
                <a href="/index/lan/id/6.html" target="_blank" title="">服务协议</a> <span>|</span>
                <a href="/index/lan/id/7.html" target="_blank" title="">竞猜规则</a><span>|</span>
                <a href="/index/lan/id/4.html" target="_blank" title="">常见问题</a>
            </p>
            <p class="copyright">Copyright © 2015-2018 红蓝电竞. All rights reserved. 广州诗汇轩网络信息有限公司<br><a href="http://www.miibeian.gov.cn/"
                    target="_blank">粤ICP备16051838号</a></p>
        </div>
    </div>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <script>
        $('.ss_dt_l').animate({
            scrollTop: 9999
        }, 'slow');

        $("#J-hero-titles li").on('click', function () {
            var index = $(this).index();
            $(this).addClass('curr').siblings().removeClass('curr');
            $('.wrap .J-hero-cont').eq(index).show().siblings('div').hide();
        })
        var one = $('.lbt_ul');
        var width = 1200;
        var sy = 0;
        var max = one.find('li').length - 1;
        var t = 500;
        one.find('li:first').clone().appendTo(one);
        var time = setInterval(start, 5000);
        var $lbt_cr = $('.round li');

        function start() {
            if (!one.is(':animated')) {
                if (sy < max) {
                    sy += 1;
                    changeNext();
                } else {
                    sy = 0;
                    changeFirst();
                }
                change_cr();
            }
        }
        $('.sliderNews').on({
            mouseenter: function () {
                clearInterval(time);
            },
            mouseleave: function () {
                clearInterval(time);
                time = setInterval(start, 1500);
            }
        });
        $lbt_cr.on('click', function () {
            sy = $(this).index();
            changeNext();
            change_cr();
        })

        function changeNext() {
            one.animate({
                left: -width * sy
            }, t);
        }

        function changeFirst() {
            one.animate({
                left: -width * (max + 1)
            }, t, function () {
                $(this).css('left', 0)
            });
        }

        function change_cr() {
            $lbt_cr.eq(sy).addClass('roundLiHover').siblings().removeClass('roundLiHover');
        }
    </script>
</body>

</html>